<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

<div id="app">
    <img :src="imgArr[index]" :style="style">
    <a href="#" @click="prev" v-show="index != 0" >上一张</a>
    <a href="#" @click="next" v-show="index!=imgArr.length-1">下一张</a>
</div>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            imgArr:["img/1.jpg", "img/2.jpg", "img/3.jpg"],
            index:0,
            style:"width:400px"
        },
        methods:{
            prev:function () {
                if (this.index>0)
            {
                this.index --
            }else
                {}
                },
            next:function () {
                if (this.index<this.imgArr.length-1)
                {
                    this.index ++
                }
            }
        }
    })
</script>
</body>
</html>
